<template>
  <div class="customermanagementlist">
    <!-- 头部搜索部分 -->
    <div class="shareheader">
      <div class="shareheader_top">
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">订单号:</span>
          <el-input
            v-model="orderSearch.orderNum"
            placeholder="请输入订单号"
            style="width: 200px; padding: 0px 8px 0px 0px"
          />
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">运单号:</span>
          <el-input
            v-model="orderSearch.waybillNum"
            placeholder="请输入运单号"
            style="width: 200px; padding: 0px 8px 0px 0px"
          />
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >所属客户:</span
          >
          <el-select
            v-model="orderSearch.customerName"
            filterable
            placeholder="请选择所属客户"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in customerBoxData"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >客户所属区域:</span
          >
          <el-select
            v-model="orderSearch.branch"
            placeholder="客户所属区域"
            filterable
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="website in websiteList"
              :key="website.id"
              :label="website.name"
              :value="website.id"
            />
          </el-select>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >运单出发区域:</span
          >
          <el-select
            v-model="orderSearch.from_area_id"
            filterable
            placeholder="请选择运单出发区域"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in websiteList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >运单目的区域:</span
          >
          <el-select
            v-model="orderSearch.to_area_id"
            filterable
            placeholder="请选择运单目的区域"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in websiteList"
              :key="index"
              :value="item.id"
              :label="item.name"
            ></el-option>
          </el-select>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >出发网点:</span
          >
          <el-cascader
            style="width: 200px; padding: 0px 8px 0px 0px"
            placeholder="请选择出发网点"
            v-model="orderSearch.from_network_id"
            :options="organizationBoxData"
            :props="propsBranchType"
            :show-all-levels="false"
            filterable
            clearable
          >
          </el-cascader>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >目的网点:</span
          >
          <el-cascader
            style="width: 200px; padding: 0px 8px 0px 0px"
            placeholder="请选择出发网点"
            v-model="orderSearch.to_network_id"
            :options="organizationBoxData"
            :props="propsBranchType"
            :show-all-levels="false"
            filterable
            clearable
          >
          </el-cascader>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px">温层:</span>
          <el-select
            v-model="orderSearch.thermosphere"
            placeholder="请选择温层"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option
              v-for="(item, index) in thermosphereData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >是否签收:</span
          >
          <el-select
            v-model="orderSearch.is_qs"
            placeholder="请选择是否签收"
            style="width: 200px; padding: 0px 8px 0px 0px"
          >
            <el-option label="是" value="1">是</el-option>
            <el-option label="否" value="0">否</el-option>
          </el-select>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >是否回单:</span
          >
          <el-select
            v-model="orderSearch.is_hd"
            placeholder="请选择是否回单"
            style="width: 210px; padding: 0px 8px 0px 0px"
          >
            <el-option label="是" value="1">是</el-option>
            <el-option label="否" value="0">否</el-option>
          </el-select>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >是否异常:</span
          >
          <el-select
            v-model="orderSearch.is_abnormal"
            placeholder="请选择是否异常"
            style="width: 210px; padding: 0px 8px 0px 0px"
          >
            <el-option label="是" value="1">是</el-option>
            <el-option label="否" value="0">否</el-option>
          </el-select>
        </div>
        <div style="min-width: 260px; margin: 5px 10px 18px 0px">
          <span style="font-size: 13px; padding: 0px 8px 0px 0px"
            >开单时间:</span
          >
          <el-date-picker
            v-model="orderSearch.datepicker"
            type="datetimerange"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            range-separator="至"
            value-format="timestamp"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          >
          </el-date-picker>
        </div>
        <div style="min-width: 100px; margin: 5px 10px 18px 0px">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="waybillFullLinkListFn(1, 10)"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh-left" @click="resultClickFn"
            >重置</el-button
          >
        </div>
      </div>
    </div>
    <!-- 头部内容 -->
    <div
      class="sharecontent_header"
      style="margin-bottom: 10px; overflow: hidden; height: 30px"
    >
      <div class="sharecontent_header_right" style="float: left">
        <el-button
          type="primary"
          plain
          class="improtOut"
          :loading="faslelodaing"
          @click="ExportClickPlayFn"
          v-permission="'waybillFullLink_export'"
        >
          导出
        </el-button>
        <el-button
          type="primary"
          plain
          class="improtOut"
          :loading="faslelodaing"
          @click="expotRecotDdata()"
          v-permission="'waybillFullLink_export'"
        >
          导出列表
        </el-button>
      </div>
      <div class="sharecontent_header_left">
        <SettinUp
          :settype="12"
          :objSettinUpdata="objSettinUp"
          key="2"
        ></SettinUp>
      </div>
    </div>
    <div v-if="header_data_list.length > 0">
      <TableHeader
        ref="TableHeaderList_one"
        :header_data_list="header_data_list"
        :HeaderData="HeaderData"
        :propMap="propMap"
        :objheader="objheader"
        @childEvent="handleDelete"
        @orderIdNumsEvent="handleDeleteType"
      >
      </TableHeader>
    </div>
    <div
      style="display: flex; justify-content: flex-end; margin: 10px 0px 5px 0px"
    >
      <el-pagination
        small
        background
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalListNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div>
      <el-drawer
        title="商服大宽表导出"
        :visible.sync="BusinessExport"
        direction="rtl"
        size="50%"
        :append-to-body="true"
        :before-close="BeClosetade"
        :close="BeClosetade"
      >
        <div style="padding: 0px 10px 10px 18px">
          <el-table :data="gridData" border>
            <el-table-column
              property="creator_id_name"
              label="导出人"
              width="100"
            ></el-table-column>
            <el-table-column
              property="create_time_name"
              label="导出时间"
              width="180"
            ></el-table-column>
            <el-table-column
              property="status_name"
              label="导出状态"
              width="110"
            >
              <template slot-scope="scope">
                <el-tag type="success" v-if="scope.row.status == '2'">{{
                  scope.row.status_name
                }}</el-tag>
                <el-tag type="warning" v-else-if="scope.row.status == '0'">{{
                  scope.row.status_name
                }}</el-tag>
                <el-tag type="danger" v-else-if="scope.row.status == '1'">{{
                  scope.row.status_name
                }}</el-tag>
                <el-tag v-else>{{ scope.row.status_name }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column property="download_url" label="导出地址">
              <template slot-scope="scope">
                <span
                  style="color: #409eff"
                  @click="handleClick(scope.row)"
                  v-if="scope.row.download_url != ''"
                  >{{ "https://" }}{{ scope.row.download_url }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" width="70">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  v-if="scope.row.download_url != ''"
                  >导出</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-drawer>
    </div>
  </div>
</template>
<script>
import {
  waybillFullLinkList,
  branchList,
  waybillFullLinkExport,
  customerBox,
  export_record_list,
} from "@/api/Largewidthmeterlist";
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
import { organizationBox } from "@/api/organization";
import { reqDictionaryOptions } from "@/api/earlywarning";
export default {
  name: "Largewidthmeterlist",
  components: { TableHeader, SettinUp },
  data() {
    return {
      faslelodaing: false,
      pageNum: 1, //目前在第几页
      totalListNum: 100, //列表总数
      pageSize: 20, //一页多少条
      tableData: [], //table列表数据
      maxheight: 400,
      multipleSelection: [],
      thermosphereData: [],
      websiteList: [],
      orderSearch: {
        orderNum: "",
        waybillNum: "",
        branch: "",
        // waybill_create_time_start_time:"",
        // waybill_create_time_end_time:"",
        datepicker: [],
        customerName: "",
        thermosphere: "",
        is_qs: "",
        is_hd: "",
        is_abnormal: "",
        from_area_id: "",
        to_area_id: "",
        from_network_id: [],
        to_network_id: [],
      },
      resultData: "",
      reqUrl: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      customerBoxData: [],
      organizationBoxData: [],
      propsBranchType: {
        emitPath: true,
        checkStrictly: true,
        value: "id",
        label: "branch_name",
        children: "next_level_data",
      },
      orders: [],
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      BusinessExport: false,
      gridData: [], //导出
      setTimer: "",
    };
  },
  watch: {
    BusinessExport() {
      if (this.BusinessExport == false) {
        this.BeClosetade();
      }
    },
  },
  mounted() {
    this.waybillFullLinkListFn(this.pageNum, this.pageSize);
    this.defaultDate();
    this.thermosphereClickFn();
    this.getWebsiteList();
    this.customerBoxFn();
    this.organizationBoxFn();
  },
  methods: {
    organizationBoxFn() {
      let data = {
        show_employee: false, // 是否展示员工信息
        not_show_first_branch: 1,
      };
      organizationBox(data).then((res) => {
        if (res.code === 10000) {
          this.organizationBoxData = res.data;
        }
      });
    },
    //获取所属客户
    customerBoxFn() {
      let data = {
        name: "", //名称
        is_send: "1", //是否为客户 0不  1是客户
        is_receive: "", //是否收货单位  0不是  1是
      };
      customerBox(data).then((res) => {
        if (res.code === 10000) {
          this.customerBoxData = res.data;
        }
      });
    },
    // customerNameChane(val){
    //   // console.log(val,11111)
    // },
    //大区
    async getWebsiteList() {
      let result = await branchList({ branch_type: "3" });
      this.websiteList = result.data;
    },
    //温层
    thermosphereClickFn() {
      const data = {
        dictionary_code: "thermosphere",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.thermosphereData = res.data.list;
        }
      });
    },
    //重置按钮
    resultClickFn() {
      this.orderSearch.orderNum = "";
      this.orderSearch.waybillNum = "";
      this.orderSearch.branch = "";
      this.orderSearch.datepicker = [];
      // this.orderSearch.waybill_create_time_end_time = ""
      this.orderSearch.customerName = "";
      this.orderSearch.thermosphere = "";
      this.orderSearch.is_qs = "";
      this.orderSearch.is_hd = "";
      this.orderSearch.is_abnormal = "";
      this.orderSearch.from_area_id = "";
      this.orderSearch.to_area_id = "";
      this.orderSearch.from_network_id = "";
      this.orderSearch.to_network_id = "";
      this.pageNum = 1;
      this.pageSize = 20;
      this.defaultDate();
      this.waybillFullLinkListFn(this.pageNum, this.pageSize);
    },
    //获取选中项数据的 ID
    handleSelectionChange(val) {
      this.multipleSelection = val;
      if (val.length > 0) {
        for (var i = 0; i < val.length; i++) {
          this.customerId = val.map((item) => Number(item.id));
        }
      } else {
        this.customerId = [];
      }
    },
    handleSizeChange(val) {
      this.pageSize = val; //一页多少条
      this.waybillFullLinkListFn(this.pageNum, this.pageSize);
    },
    handleCurrentChange(val) {
      this.pageNum = val; //第多少页
      this.waybillFullLinkListFn(this.pageNum, this.pageSize);
    },
    // 表格列表数据API
    waybillFullLinkListFn(pageNumval, pageSizeval) {
      // console.log(this.orderSearch.datepicker[0], "");
      const data = {
        header_id: 12 + "",
        is_sign: this.orderSearch.is_qs,
        order_no: this.orderSearch.orderNum,
        is_receipt: this.orderSearch.is_hd,
        waybill_no: this.orderSearch.waybillNum,
        is_abnormal: this.orderSearch.is_abnormal,
        w_customer_id: this.orderSearch.customerName + "",
        w_thermosphere: this.orderSearch.thermosphere,
        waybill_create_time_start_time:
          this.orderSearch.datepicker[0] != undefined
            ? parseInt(this.orderSearch.datepicker[0] / 1000) + ""
            : "",
        waybill_create_time_end_time:
          this.orderSearch.datepicker[1] != undefined
            ? parseInt(this.orderSearch.datepicker[1] / 1000) + ""
            : "",
        page: pageNumval,
        page_size: pageSizeval,
        w_customer_area_id: this.orderSearch.branch + "",
        w_from_area_id: this.orderSearch.from_area_id + "",
        w_to_area_id: this.orderSearch.to_area_id + "",
        w_from_network_id_list:
          this.orderSearch.from_network_id != ""
            ? [
                this.orderSearch.from_network_id[
                  this.orderSearch.from_network_id.length - 1
                ],
              ]
            : [],
        w_to_network_id_list:
          this.orderSearch.to_network_id != ""
            ? [
                this.orderSearch.to_network_id[
                  this.orderSearch.to_network_id.length - 1
                ],
              ]
            : [],
      };
      waybillFullLinkList(data).then((res) => {
        if (res.code === 10000 && res.data.list !== null) {
          this.orders = res.data.data || [];
          this.orders.unshift({});
          this.header_data_list = this.orders;
          this.HeaderData = res.data.item_list;
          this.Fntransformation(this.HeaderData);
          this.pageNum = res.data.page;
          this.totalListNum = res.data.total;
          this.pageSize = res.data.page_size;
        } else {
          this.tableData = [];
          this.pageNum = 1;
          this.pageSize = 20;
          this.totalListNum = 0;
        }
      });
    },
    objheader(obj) {
      // var data = {
      //   header_id: 12 + "",
      //   ...obj,
      //   order_no:obj.w_waybill_no
      // }
      // this.obj_list = obj
      // waybillFullLinkList(data).then((res)=>{
      // // console.log(res,"fjlskjdflkjl")
      // this.header_data_list = res.data.data
      // if (res.code === 10000 && res.data.data !== null) {
      //  this.header_data_list.unshift({});
      //  this.pageNum = res.data.page;
      //     this.totalListNum = res.data.total;
      //     this.pageSize = res.data.page_size;
      // } else {
      // this.header_data_list= [{}];
      // this.paginations.total = 0;
      //  this.orderslength = 0;
      // }
      // })
    },
    handleDelete(index, id, type) {
      this.handleJumpDetail(id);
    },
    handleDeleteType(value) {
      // console.log(value, "fjalsjfdl");
      this.waybillIdNums = value;
    },
    objSettinUp() {
      this.waybillFullLinkListFn();
    },
    // 隐射函数去·  ·····
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
      // console.log(this.propMap, "===============");
    },
    //导出功能API获取到模板 地址
    ExportClickPlayFn() {
      // this.faslelodaing = true;
      // console.log(
      //   this.orderSearch.datepicker[0] / 1000,
      //   " this.orderSearch.datepicker"
      // );
      let data = {
        // area_id: this.orderSearch.branch.toString(),
        w_ids: this.waybillIdNums,
        is_sign: this.orderSearch.is_qs,
        order_no: this.orderSearch.orderNum,
        is_receipt: this.orderSearch.is_hd,
        waybill_no: this.orderSearch.waybillNum,
        is_abnormal: this.orderSearch.is_abnormal,
        w_customer_id: this.orderSearch.customerName + "",
        w_thermosphere: this.orderSearch.thermosphere,
        waybill_create_time_start_time:
          this.orderSearch.datepicker[0] != undefined
            ? parseInt(this.orderSearch.datepicker[0] / 1000) + ""
            : "",
        waybill_create_time_end_time:
          this.orderSearch.datepicker[1] != undefined
            ? parseInt(this.orderSearch.datepicker[1] / 1000) + ""
            : "",
        w_customer_area_id: this.orderSearch.branch + "",
        w_from_area_id: this.orderSearch.from_area_id + "",
        w_to_area_id: this.orderSearch.to_area_id + "",
        w_from_network_id_list:
          this.orderSearch.from_network_id != ""
            ? [
                this.orderSearch.from_network_id[
                  this.orderSearch.from_network_id.length - 1
                ],
              ]
            : [],
        w_to_network_id_list:
          this.orderSearch.to_network_id != ""
            ? [
                this.orderSearch.to_network_id[
                  this.orderSearch.to_network_id.length - 1
                ],
              ]
            : [],
      };
      waybillFullLinkExport(data).then((res) => {
        if (res.code == "10000") {
          this.BusinessExport = true;
          this.expotRecotD();
          this.setTimer = setInterval(() => {
            this.expotRecotD();
          }, 5000);
        } else {
          this.$message({
            showClose: true,
            message: res.message,
            type: "error",
          });
        }
      });
    },
    handleClick(row) {
      this.reqUrl = "https://" + row.download_url;
      window.open(this.reqUrl);
      this.faslelodaing = false;
    },
    expotRecotDdata() {
      this.BusinessExport = true;
      this.expotRecotD();
      this.setTimer = setInterval(() => {
        this.expotRecotD();
      }, 5000);
    },
    expotRecotD() {
      var param = {
        type: "waybill_full_link", // type必填
      };
      export_record_list(param).then((res) => {
        this.gridData = res.data.data;
      });
    },
    BeClosetade() {
      this.BusinessExport = false;
      clearInterval(this.setTimer);
    },
    //设置默认日期
    defaultDate() {
      console.log("----------zhang sdlfkja ");
      let end = new Date().getTime(); //当天
      let beg = end - 30 * 24 * 60 * 60 * 1000; // 30天 * 24小时 * 60分钟 * 60秒 * 1000毫秒
      this.orderSearch.datepicker = [beg, end]; //将值设置给插件绑定的数据
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.grid-content .el-input {
  width: 71% !important;
}

/deep/.el-drawer__header {
  margin-bottom: 10px;
}

/deep/.grid-content .el-select {
  width: 80% !important;
}

/deep/.grid-content .el-select .el-input {
  width: 88% !important;
}

/deep/.pickerTime .el-date-editor {
  width: 35% !important;
}

/deep/.el-row {
  margin-bottom: 25px !important;
}

.sharecontent_header_right .improtOut a {
  color: #409eff;
}

.sharecontent_header_right .improtOut a:hover {
  color: #fff;
}

.sharecontent_header_right .improtOut:hover a {
  color: #fff;
}

.customermanagementlist {
  padding: 10px;
  margin-top: 5px;
  margin-left: 5px;
  background-color: #fff;

  .shareheader {
    margin: 0 auto;

    .shareheader_top {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .sharecontent_header_left {
    float: right;
    padding: 0px 8px 0px 0px;
  }
}
</style>